<template>
    <div class="my-pagination">
        <a @click='changePage(false)' href="javascript:;" :class="{disabled: currentPage===1}">上一页</a>
        <a @click='changePage(item,index)' href="javascript:;" :class='{active: currentPage===item}' v-for='(item,index) in list' :key='index'>{{item}}</a>
        <a @click='changePage(true)' href="javascript:;" :class='{disabled: currentPage===pages}'>下一页</a>
    </div>
</template>
<script>
import { computed, ref } from 'vue'

export default {
    name: 'MyPagination',
    props: {
        total: {
            type: Number,
            default: 100
        },
        pagesize: {
            type: Number,
            default: 10
        }
        // 默认初始页码
        // page: {
        //   type: Number,
        //   default: 1
        // }
    },
    setup (props, { emit, attrs }) {
        // attrs表示父组件传递的属性，但是props没有接收的属性，这种属性不是响应式的
        // 动态计算中期的页码信息
        // 每页的条数
        // const pagesize = 8
        // 总页数
        const pages = computed(() => Math.ceil(props.total / props.pagesize))
        // 当前页码
        // console.log(attrs.page)
        const currentPage = ref(attrs.page || 1)
        // 动态计算页码列表
        const list = computed(() => {
            // 当父组件传递total的值发生变化时，计算属性会重新计算
            // pages = Math.ceil(props.total / props.pagesize)
            const indexArr = []
            let pagerCount = 7
            // 总页码小于等于5；大于5
            indexArr[0] = 1 //第1个永远是1
            if (pages.value <= pagerCount) {
                for (let i = 1; i < pages.value; i++) {
                    indexArr.push(i + 1)
                }
            } else {
                indexArr[pagerCount - 1] = pages.value //最后1个永远是pages
                if (currentPage.value <= pagerCount - 3) {
                    for (let i = 1; i < pagerCount - 1; i++) {
                        indexArr[i] = i + 1
                    }
                } else if (currentPage.value <= pages.value - pagerCount + 3) {
                    let j = 1;//用于计算下标的
                    for (let i = -Math.ceil((pagerCount - 3) / 2); i <= Math.floor((pagerCount - 3) / 2); i++) {
                        indexArr[j++] = currentPage.value + i
                    }
                } else {
                    let j = 1;//用于计算下标的
                    for (let i = pages.value - pagerCount + 2; i < pages.value; i++) {
                        indexArr[j++] = i
                    }
                }
            }
            for (let i = 1; i < indexArr.length; i++) {
                if (indexArr[i] - indexArr[i - 1] > 1) {
                    for (let j = indexArr.length; j > i; j--) {
                        indexArr[j] = indexArr[j - 1]
                    }
                    indexArr[i] = '...'
                }
            }
            console.log(indexArr);
            return indexArr;
        })
        // 控制上一页和下一页变化
        const changePage = (type) => {
            if (type == '...') {
                return
                // if ()
                // console.log(index);
                // if (index < Math.floor(pages.value / 2)) {
                //     currentPage.value = currentPage.value += 3
                //     console.log(currentPage.value);
                // }
            } else if (type === false) {
                // 上一页
                // 页面是第一页时，禁止点击操作
                if (currentPage.value === 1) return
                if (currentPage.value > 1) {
                    currentPage.value -= 1
                }
            } else if (type === true) {
                // 下一页
                // 页面是最后页时，禁止点击操作
                if (currentPage.value === pages.value) return
                if (currentPage.value < pages.value) {
                    currentPage.value += 1
                }
            } else {
                // 点击页码
                currentPage.value = type
            }
            emit('change-page', currentPage.value)
        }
        return { list, currentPage, pages, changePage }
    }
}
</script>
<style scoped lang="less">
.my-pagination {
    display: flex;
    justify-content: center;
    padding: 30px;
    > a {
        display: inline-block;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        border: 1px solid #e4e4e4;
        border-radius: 4px;
        margin-right: 10px;
        &:hover {
            color: #27ba9b;
        }
        &.active {
            background: #27ba9b;
            color: #fff;
            border-color: #27ba9b;
        }
        &.disabled {
            cursor: not-allowed;
            opacity: 0.4;
            &:hover {
                color: #333;
            }
        }
    }
    > span {
        margin-right: 10px;
    }
}
</style>
 